<template>
  <div class="main">
    <!-- <div class="search">
      <div>
        <el-select v-model="value" placeholder="请选择">
          <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
          </el-option>
        </el-select>
        <el-button type="primary" icon="el-icon-search" class="ml10" @click="search">查询</el-button>

      </div>
      <div>
        <el-button type="primary" icon="el-icon-plus" @click="add">新增文章</el-button>
      </div>
    </div> -->
    <el-tabs v-model="activeName" @tab-click="handleClick">
      <el-tab-pane label="待审核" name="0" />
      <el-tab-pane label="已通过" name="1" />
      <el-tab-pane label="未通过" name="-1" />
    </el-tabs>
    <TableList :loading="loading" :tabledata="tableData" :params="params" :tabledatacolumn="tableDataColumn"  @chakan="chakan"
               @handleCurrentChange="handleCurrentChange" @handleSizeChange="handleSizeChange" :isshow="true">
      <template v-slot:default="info">
        <el-button type="text" @click="chakan(info.info)" v-if="activeName==1">查看</el-button>
        <el-button type="text" v-if="info.info.approval == -1" @click="ckshjg(info.info)">退回原因</el-button>
        <!-- <el-button type="text" @click="shenhe(info.info)">审核</el-button> -->
        <el-button type="text" @click="editcontent(info.info)" v-if="activeName==0 ||activeName==-1">编辑</el-button>
        <el-button type="text" @click="deleteRow(info.info)" v-if="activeName==0 ||activeName==-1">删除</el-button>
      </template>
    </TableList>
    <el-dialog title="审核" :visible.sync="dialogFormVisible" width="900px">
      <Form :formobj="formobj" :formdata="formData" ref="form" :formrules="formrules"></Form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="quxiao">取 消</el-button>
        <el-button type="primary" @click="tijiao">确 定</el-button>
      </div>
    </el-dialog>
    <el-dialog title="查看" :visible.sync="dialogck" width="1240px">
      <div>
        <h1>{{details.title}}</h1>
        <div v-html="details.content" style="padding: 20px 80px;"></div>
        <!-- <el-button @click="jietu">截图</el-button> -->
      </div>
    </el-dialog>
    <el-dialog title="查看审核结果" :visible.sync="dialogckshjg" width="900px">
      <div>
        <h4>{{shdetails.articleTitle}}</h4>
        <div>
          退回原因：<span v-if="shdetails.approvalReason" v-html="shdetails.approvalReason"></span>
                   <span v-else>无</span>
        </div>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import ScreenShort from "js-web-screen-shot";
import { columnAdd, columnqueryAll, columndelete, contentApiqueryPage, contentApidelete, approval } from "@/api/webpage";
import Form from "@/components/form.vue"
import TableList from "@/components/TableList.vue";
import { getUserInfo } from '@/utils/auth' // get token from cookie
export default {
  name: "myarticlelist",
  components: {
    TableList,
    Form
  },
  data() {
    return {
      activeName:0,
      loading:true,
      options: [],
      dialogckshjg:false,
      shdetails:{},
      value: '',
      tableData: [],
      tableDataColumn: [
        { label: "标题", key: "title" ,type: 'link'},
        { label:'所属栏目',key:'columnName'},
        { label:'审核结果',key:'approval',type:'shjg'}
      ],
      params: {
        approval: '0',
        total: 0,
        pageNum: 1,
        pageSize: 10,
        columnId: this.$route.query.cid,
        createBy:''
      },
      formData: {
        contentId: '',
        approvalResult: '',
        approvalReason: '',
        top: '0',
        nice: '0'
      },
      formobj: [
        { label: "审核结果", key: "approvalResult", type: "radio", options: [{ label: '通过', value: '1' }, { label: '不通过', value: '-1' }] },
        { label: "审核原因", key: "approvalReason", type: "editor" },
        { label: "是否置顶", key: "top", type: "radio", options: [{ label: '是', value: '1' }, { label: '否', value: '0' }] },
        { label: "是否推荐", key: "nice", type: "radio", options: [{ label: '是', value: '1' }, { label: '否', value: '0' }] },

      ],
      formrules: {
        approvalResult: [
          { required: true, message: "请选择", trigger: "change" },
        ],
      },

      dialogFormVisible: false,
      dialogck: false,
      details: {}
    }
  },
  created() {
    this.getoptions()
    this.getlist();

    this.value = this.$route.query.cid

    console.log('getUserInfo',JSON.parse(getUserInfo()));
  },
  methods: {
    handleClick(tab, event) {
      this.params.approval = tab.name
      this.params.pageNum = 1
      this.getlist()
    },
    jietu() {
      const screenShotHandler = new ScreenShort({
          enableWebRtc: false,  //是否显示选项框
          level: 9999,  //层级级别
          completeCallback: this.callback,
          closeCallback: this.closeFn,
        })
    },
    // 查看
    chakan(row) {
      this.dialogck = true
      this.details = row

    },
    ckshjg(row){
      console.log("🚀 ~ file: index.vue ~ line 129 ~ ckshjg ~ row", row)
      this.dialogckshjg = true
      this.shdetails = row
    },
    // 审核
    shenhe(info) {
      this.dialogFormVisible = true
      this.formData.contentId = info.id
    },
    // 提交审核
    tijiao() {
      this.$refs.form.getData().then(res => {
        approval(res).then(result => {
          if (result.code == 0) {
            this.dialogFormVisible = false
            this.$refs.form.resetForm()
            this.$message.success("审核成功")
            this.getlist()
          }
        })
      })


    },
    quxiao(){
      this.dialogFormVisible = false
      this.$refs.form.resetForm()
    },
    search() {
      this.params.columnId = this.value
      this.getlist();
    },
    add() {
      this.$router.push({
        name: 'addform'
      })
    },
    editcontent(row) {
      if(row.columnId == '39804870715F4427BDB177E39D726B54'){
        // 精彩瞬间跳转
        this.$router.push({
          name: 'jcsjaddform',
          query: { type: 'edit', id: row.id }
        })
      }else{
        this.$router.push({
          name: 'addform',
          query: { type: 'edit', id: row.id }
        })
      }

      
    },
    getoptions() {
      let data = {
        name: "",
        code: "",
        parentId: '',
      };
      columnqueryAll(data).then((res) => {
        if (res.code == 0) {
          this.options = res.data.map(item => {
            return { label: item.name, value: item.id }
          });
        }
      });
    },
    getlist() {
      this.params.createBy = JSON.parse(getUserInfo()).id
      contentApiqueryPage(this.params).then((res) => {
        if (res.code == 0) {
          this.loading = false
          this.tableData = res.rows.map(item=>{
            return item
          })
          this.params.total = res.total
        }
      });
    },
    handleCurrentChange(val) {
      this.params.pageNum = val;
      this.getlist()
    },
    handleSizeChange(val) {
      this.params.pageSize = val;
      this.getlist()
    },
    deleteRow(row) {
      console.log(row);
      this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          let ids = [];
          ids.push(row.id);
          contentApidelete(ids)
            .then((res) => {
              if (res.data == 1) {
                this.$message({
                  type: "success",
                  message: "删除成功!",
                });
                this.getlist();
              } else {
                this.$message.error("删除失败");
              }
            })
            .catch((err) => {
              console.log(err);
            });
        })
        .catch(() => { });
    },
  },
      /**
     * 根据图片生成画布
     */
     convertImageToCanvas(image) {
      var canvas = document.createElement("canvas");
      canvas.width = image.width;
      canvas.height = image.height;
      canvas.getContext("2d").drawImage(image, 0, 0);
      return canvas;
    },
    /**
     * 生成图片
     * 截图确认按钮回调函数
     */
    callback(base64data) {
        var image = new Image();
        image.src = base64data;
        image.onload = () => {
          var canvas = this.convertImageToCanvas(image);
          var url = canvas.toDataURL("image/jpeg");
          // 在页面展示的数组，次数组是要把截图成功后的图片在页面上展示出来的数组，可以根据自己项目的需求进行添加
          this.uploadlist.push({image:url})
          for(var i=0;i<this.uploadlist.length;i++){
            if(this.uploadlist.length>=6){
              this.uploadhide=false;
            }
          }
          console.log(this.uploadlist,'push')

          var bytes = window.atob(url.split(",")[1]);  //通过atob将base64进行编码
          //处理异常，将ASCII码小于0的转换为大于0,进行二进制转换
          var buffer = new ArrayBuffer(bytes.length);
          var uint = new Uint8Array(buffer);  //生成一个8位数的数组
          for (var i = 0; i < bytes.length; i++) {
            uint[i] = bytes.charCodeAt(i);  //根据长度返回相对应的Unicode 编码
          }
          //Blob对象
          var imageFile= new Blob([buffer], { type: "image/jpeg" }); //type为图片的格式

          // 给后台返回的数组，我的项目需求是要截图多张上传给后端的，如果只上传一张直接就上传imageFile上一句就行，这个数组可以跟根据自己的需求进行编写
          this.imageFilelist.push(imageFile);
          if (this.imageFilelist != "") {
            this.$message({
              type: "success",
              message: "截图成功",
            });
          }
      };
    },
}
</script>
<style scoped>
@import "~@/assets/css/adminstyle.css";
</style>
